﻿<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>智慧园区地下管道平台</title>
  <link rel="icon" href="./images/favicon.ico" type="image/x-icon" />
  <link rel="stylesheet" href="./css/comon0.css" />
  <link rel="stylesheet" href="./css/index.css" />
  <link rel="stylesheet" href="css/liMarquee.css" />
  <script src="./build/XbsjEarth/XbsjEarth.js"></script>
  <script src="./scripts/vue.min.js"></script>
  <script src="./scripts/Map3D.js"></script>
  <script src="./scripts/turf.min.js"></script>
  <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
  <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>

  <!-- <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> -->
</head>

<body>
  <!-- <iframe src="./dist/index.html" id="iframe" name="iframe" height="100%" width="100%" scrolling="no" frameborder="0"
    onload="changeFrameHeight()"> </iframe> -->
  <div id="vueApp" style="width: 100%; height: 100%; background: grey; position: relative; ">
    <earth-comp></earth-comp>
  </div>

  <div class="fixpanel header">
    <h1 style="letter-spacing:10px;">
      <!-- <img src="picture/logo.png"> -->
      智慧园区地下管道平台
    </h1>
    <!-- <img src="images/title.png" alt="" style="height:80%"> -->
    <div class="clock" id="clock"></div>
  </div>

  <div class="box">
    <div class="box-left">

      <div class="left-top">
        <div class="sycm" overflow: hidden;">
          <ul class="clearfix">
            <li>
              <h2 id="dianli_total_input">100000</h2><span>总收入</span>
            </li>
            <li>
              <h2 id="dianli_total_output">50000</h2><span>总利润</span>
            </li>
          </ul>
        </div>
      </div>

      <div class="left-center">
        <div class="title-box">
          <h6>地块迁移</h6>
          <img class="line-img" src="images/line-blue.png" alt="">
        </div>
        <div class="chart-box">
          <div id="chartleft0" style="width:100%;height:100%;"></div>
        </div>
        <ul id="nowWarn-ul-left0" class="ranking-box" style="display: none;">

        </ul>
      </div>
      <div class="left-bottom">
        <div class="title-box">
          <h6>迁移补偿</h6>
          <img class="line-img" src="images/line-blue.png" alt="">
          <button data-state=1 id="tabBtn-left-bottom"><img src="images/chart_icon.png" alt="">
            <span value="chart">图表</span>
          </button>
        </div>
        <div class="chart-box">
          <div id="chartleft1" style="width:100%;height:100%;"></div>
        </div>
        <ul id="nowWarn-ul-left1" class="ranking-box" style="display: none;">

        </ul>

      </div>

    </div>
    <div class="box-middle">
      <div class="parkEnterprise" style="background: rgb(4, 26, 69); " id="infoshowSY" hidden="hidden">

        <!-- <div class="btn-close">
          <img src="./images/close.png" onclick="$('#infoshowSY').hide(500)">
        </div> -->

        <!-- <iframe id="infoWin" src="about:blank" height="100%" width="100%" scrolling="no" frameborder="0">
    
        </iframe> -->

        <!-- <image ></image> -->
        <!-- <div class="vertex-point" style="bottom: -2px; left: -2px;"></div> -->
        <!-- <div class="vertex-point" style="bottom: -2px; right: -2px;"></div> -->
      </div>
    </div>
    <div class="box-right">
      <!-- <img src="images/line_img.png" style="position: absolute;left: -20px;top: 0;height: 100%;"> -->
      <div class="right-top">

        <div class="title-box">
          <h6 id="barTitle">实时订单情况</h6>
          <img class="line-img" src="images/line-blue.png" alt="">
          <!-- <button data-state=1 id="tabBtn-right-top"><img src="images/chart_icon.png" alt="">
            <span value="chart">图表</span>
          </button> -->
        </div>


        <div class="chart-box">
          <div id="chartright0" style="width:100%;height:100%;"></div>
        </div>
        <!-- <div id="nowWarn-div-right0" class="data-box" style="width:100%;height:100%;display:none;"> -->
        <ul id="nowWarn-ul-right0" class="ranking-box" style="display:none;">
          <li>
            <p>名称</p>
            <p>产出</p>
            <p>消耗</p>
          </li>
        </ul>





      </div>


    </div>


  </div>

  <div class="box-bottom">
    <div>
      <!-- <button  id="info-img-1" data-state=1> -->
      <img id="info-img-1" src="images/info-img-1.png" alt="" class="bj-1" />
      <!-- </button> -->

      <p style="background-color: yellow;" value="chart">车辆总数</p>
    </div>
    <div>
      <img src="images/info-img-2.png" alt="" class="bj-1" />
      <p style="background-color: yellow;">当前在线</p>
    </div>
    <div>
      <img src="images/info-img-3.png" alt="" class="bj-1" />
      <p style="background-color: yellow;">今日活跃</p>
    </div>
    <div>
      <img src="images/info-img-4.png" alt="" class="bj-1" />
      <p style="background-color: yellow;">今日活跃</p>
    </div>
  </div>









  <!-- <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog  modal-lg modal-lg-a">
      <div class="modal-content modal-content-a" style="max-width: 1200px">

      </div>



    </div>
  </div> -->






  <script type="text/javascript" src="./js/jquery.js"></script>
  <!-- <script type="text/javascript" src="./js/data.js"></script> -->
  <script type="text/javascript" src="js/echarts.min.js"></script>
  <script type="text/javascript" src="js/shine.js"></script>

  <script type="text/javascript" src="./js/jquery.liMarquee.js"></script>
  <script type="text/javascript" src="./js/indexMap.js"></script>
  <script type="text/javascript" src="./js/index.js"></script>
  <script>







    // function changeFrameHeight() {
    //   var iframe = document.getElementById("iframe");
    //   iframe.height = document.documentElement.clientHeight;
    // }
    //onresize属性可以用来获取或设置当前窗口的resize事件的事件处理函数
    //onresize事件会在窗口或框架被调整大小时发生
    // window.onresize = function () {
    //   changeFrameHeight();
    // }

    // window.onresize = function () {
    //   console.log(document.body.clientWidth + "-" + document.body.clientHeight)
    // };

    document.addEventListener("keydown", function (event) {
      // event 参数的类型为 KeyboardEvent
      // alert(event.key);
    });


    window.addEventListener("message", function (e) {
      // console.log(e.data);
      var code = e.data;
      if (code && buildObjectNameMap.has(code)) {
        var buildObject = buildObjectNameMap.get(code);
        console.log(buildObject)

        var windUrl = infoWindUrl + buildObject.code;

        console.log(windUrl)
        $("#infoWin").attr("src", windUrl);
        $('#infoshowSY').show(500);









      }

    });


    $(document).on("click", '.bb', function (event) {

      var dictionaries = event.target.getAttribute("value")
      console.log(event.target.innerHTML + "-" + dictionaries);

      if (dictionaries) {
        var windUrl = infoWindUrl + dictionaries;
        console.log(windUrl)
        $("#infoWin").attr("src", windUrl);
        $('#infoshowSY').show(500);
      }



    });






  </script>
</body>


</html>